<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>get,post,jsonp</title>
    <script src="js/vue.js"></script>
    <script src="js/vue-resource.js"></script>

</head>
<body>
    <div id="box">
        <button @click="search()">查询</button>
    </div>
<script>
    var vm=new Vue({
        dl:"#box",
        data:{

        },
        methods:{
            search(){
                this.$http.get('http://localhost:8000').then(function(res){
                    //console.log("成功");
                    console.log(res.data);
                    //res参数：请求成功时返回的数据
                    //status是请求的状态码
                    //data：请求成功返回的数据
                },function(res){
                    //console.log("失败");
                    console.log(res.status);//返回404
                });
                /*
                    2.需要向后台传递参数，并返回数值
                    需求：向后台传入两个数，返回两个数的和
                */
                // this.$http.get('sum.php',{
                //     params:{a:3,b:10}
                // }).then(function(res){
                //     console.log(res.data);
                // },function(res){
                //     console.log(res.status);
                // })
                //3.请求真实的数据
                //接口，接口描述，参数描述，返回值，状态码
                // this.$http.get("http://api.map.baidu.com/telematics/v3/weather?location=北京&output=json&ak=E4805d16520de693a3fe707cdc962045").then(function(res){
                //     console.log(res.data);
                // },function(res){
                //     console.log(res.status);
                // })

                //post请求
                //求两个数的差
                /*
                    参数传递：{参数1：值1，参数2：值2....}
                    {emulateJSON:true} 模拟json数据格式，将参数传递过去
                
                */
                // this.$http.post('sub.php',{
                //     a:10,b:5},{emulateJSON:true}).then(function(res){
                //         console.log(res.data);
                // },function(res){
                //         console.log(res.status);
                // })

                //jsonp请求
                // this.$http.jsonp('url',{params:{a:1,b:2}},{emulateJSON:true}).then(function(res){
                //     console.log(res.data);
                // },function(res){
                //     console.log(res.status);
                // })
                /*
                    get和post请求的区别
                    get，参数拼接url上，一般保密性的信息不要使用这种方法，对文件大小有限制
                    post,数据不会显示在url上，对大小没有限制，安全！！
                    使用哪种请求方式，是由后台人员决定的
                    接口文档中，会详细标，使用什么请求方式 
                */
            }
        }
})
</script>


</body>
</html>